<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '',
  },
}
</route>

<script setup>
import ContentBox from '@/components/ContentBox.vue'
import ArticleApi from '@/service/article'

onLoad((options) => {
  const { id, title } = options
  if (id) {
    uni.setNavigationBarTitle({
      title: title || '',
    })
    getArticleDetail(id)
    readArticle(id)
  }
})

const articleDetail = ref({
  title: '',
  content: '',
  publishDate: '',
})

const getArticleDetail = async (id) => {
  const { code, result } = await ArticleApi.getArticleById({ id })
  if (code === 200 && result) {
    articleDetail.value = result
  }
}

const readArticle = async (id) => {
  await ArticleApi.readArticle({ id })
}

const _computedContent = computed(() => {
  let text = articleDetail.value.content.replace(/(&amp;)/g, '&')
  text = text.replace(/<img/g, '<img style="max-width: 100%;"')
  return text
})
</script>

<template>
  <view class="common-page-bg p-24rpx">
    <ContentBox>
      <view class="article-header">
        <view class="article-header-title">{{ articleDetail.title }}</view>
        <view class="article-header-date">{{ articleDetail.publishDate }}</view>
      </view>
      <view class="article-container">
        <rich-text
          :nodes="_computedContent"
          preview
        ></rich-text>
      </view>
    </ContentBox>
  </view>
</template>

<style lang="scss">
.article-header {
  margin-bottom: 48rpx;

  &-title {
    margin-bottom: 32rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: $uni-text-color;
  }

  &-date {
    font-size: 24rpx;
    color: $uni-text-color-grey;
  }
}

img {
  max-width: 100%;
}
</style>
